<template>
  <div class="container">
    <!-- search Bar -->
    <!-- search Bar -->
    <div class="searchBar">
      <div class="content">
        <input type="text"
               placeholder="大家都在搜全脸填充"
               class="search-inp"
               @click="search_focus()"
               disabled />
        <img class="search-icon"
             v-if="imgUrl"
             :src="imgUrl+'h5_images/mp_images/mp_2.0/shouye/sousuokuangneisousuo@2x.png'" />
      </div>
      <div class="msg">
        <a href="/pages/package_main/message_list/main"
           class="msgbox">
          <img :src="imgUrl+'h5_images/mp_images/mp_3.0/indexpage/ic_information@3x.png'"
               v-if="imgUrl"
               class="img" />
          <div style="clear:both;"></div>
        </a>
        <div class="tip"
             v-if="has_msg"></div>
      </div>
    </div>
    <!-- <div class="searchBar">
      <div class="content">
        <input type="text"
               placeholder="大家都在搜全脸填充"
               class="search-inp"
               @click="search_focus()"
               disabled>
        <img class="search-icon"
             :src="imgUrl+'h5_images/mp_images/mp_2.0/shouye/sousuokuangneisousuo@2x.png'"
             v-if="base_img">
      </div>
    </div>-->
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 @scroll="scroll"
                 @scrolltolower="pullrefresh">
      <!-- 轮播图 -->
      <div class="banner">
        <swiper class="swiper"
                :indicator-dots="true"
                :autoplay="true"
                :circular="true"
                :interval="2000"
                :duration="500"
                indicator-color="rgba(255, 255,255,.5)"
                indicator-active-color="rgba(255, 255,255,1)">
          <block v-for="(item , index) in imgUrls"
                 :key="index">
            <swiper-item>
              <img :src="imgUrl+item.image"
                   @click="to_detail(item)"
                   class="slide-image" />
            </swiper-item>
          </block>
        </swiper>
      </div>
      <!-- 小标题 -->
      <div class="tip">
        <img mode="widthFix"
             src="https://h5.ameimeika.com/mp_images/mp_2.0/jifenshangcheng/bar.png"
             alt
             class="tipImg" />
      </div>
      <!-- 商品分类-->
      <ul class="nav">
        <li class="nav-item"
            v-for="(item, index) in typelist"
            :key="index"
            @click="select_nav(item,index)">
          <div class="image">
            <img :src="imgUrl+item.image"
                 alt
                 class="img" />
          </div>
          <h4 class="nav-msg">{{item.name}}</h4>
        </li>
      </ul>
      <div class="ad_moudle clearfix">
        <div class="adImg adImg1"
             @click="to_detail(adv1)"
             v-if="adv1!=''">
          <img :src="imgUrl+adv1.ad_image"
               class="img" />
        </div>
        <div class="adImg adImg2"
             @click="to_detail(adv2)"
             v-if="adv2!=''&&adv3!=''">
          <img :src="imgUrl+adv2.ad_image"
               class="img" />
        </div>
        <div class="adImg adImg3"
             @click="to_detail(adv3)"
             v-if="adv2!=''&&adv3!=''">
          <img :src="imgUrl+adv3.ad_image"
               class="img" />
        </div>
        <div class="adImg adImg4"
             @click="to_detail(adv4)"
             v-if="adv4!=''&&adv5!=''&&adv6!=''">
          <img :src="imgUrl+adv4.ad_image"
               class="img" />
        </div>
        <div class="adImg adImg5"
             @click="to_detail(adv5)"
             v-if="adv4!=''&&adv5!=''&&adv6!=''">
          <img :src="imgUrl+adv5.ad_image"
               class="img" />
        </div>
        <div class="adImg adImg6"
             @click="to_detail(adv6)"
             v-if="adv4!=''&&adv5!=''&&adv6!=''">
          <img :src="imgUrl+adv6.ad_image"
               class="img" />
        </div>
        <div class="adImg adImg7"
             @click="to_detail(adv7)"
             v-if="adv7!=''">
          <img :src="imgUrl+adv7.ad_image"
               class="img" />
        </div>
      </div>
      <p class="fineMall">
        <img class="fineMall_img"
             :src="imgUrl+'h5_images/mp_images/3.15/jingpin1.png'"
             v-if="imgUrl"
             alt />
      </p>
      <!-- 商品列表 -->
      <div class="goods-list clearfix">
        <div class="malltab"
             v-if="tab_arr.length>0">
          <mall-tab :tab_arr="tab_arr"
                    @toggle_tab="toggle_tab"></mall-tab>
        </div>
        <shoplist :mall_List="mallList"></shoplist>
        <div class="daodi"
             v-if="isbottom&&mallList[0]">因为甄选，所以珍稀</div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import shoplist from "@/components/shop_list/shop_list";
import malltab from "@/components/mall_tab/mall_tab";
export default {
  data () {
    return {
      imgUrls: [],
      base_img: common.image_resource,
      imgUrl: common.image_response,
      adImg: [],
      mallList: [],
      num: 1,
      adv1: [],
      adv2: [],
      adv3: [],
      adv4: [],
      adv5: [],
      adv6: [],
      adv7: [],
      isbottom: false,
      alpha: 0,
      typelist: "",
      s_show: false,
      tab_arr: [],
      tab_id: 0,
      tab_value: "",
      has_msg: false
    };
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "商城"
    });
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#3EB0A9", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    this.getSwiper();
    this.getType();
    this.getAdvice();
    this.get_tab();
  },
  onShow () {
    let that = this;
    wx.setNavigationBarTitle({
      title: "商城"
    });
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#3EB0A9", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    wx.getStorage({
      key: "user_token",
      success: res => {
        that.get_msg();
      }
    });
  },
  components: {
    shoplist,
    mallTab: malltab
  },
  methods: {
    //广告位跳转
    to_detail (item) {
      common.to_detail(item);
    },
    //分类跳转
    select_nav (item, index) {
      if (item.id == 0) {
        wx.navigateTo({
          url: `/pages/package_projects/shop_type/main`
        });
      } else {
        wx.navigateTo({
          url: `/pages/package_projects/shop_type_detail/main?type=1&id=${
            item.id
            }&title=${item.name}`
        });
      }
    },
    //全部分类
    all_type () { },
    //获取轮播
    getSwiper () {
      let province_id = wx.getStorageSync("province_info");
      if (province_id) {
        province_id = JSON.parse(province_id).province_id;
      }
      common.fly_post(
        "api/v4_5/home/banners",
        {
          cate_id: 3,
          province_id: province_id || 0
        },
        response => {
          let res = response.data;
          if (res.status_code == 0) {
            this.imgUrls = res.data;
          }
        }
      );
    },
    //获取分类
    getType () {
      common.fly_post("api/v4_5/shop_goods_category/list", "", response => {
        let that = this;
        let res = response.data;
        if (res.status_code == 0) {
          // that.typelist = res.data.slice(1, 5);
          that.typelist = res.data.cate_data;
        }
      });
    },
    //获取广告
    getAdvice () {
      let province_id = wx.getStorageSync("province_info");
      if (province_id) {
        province_id = JSON.parse(province_id).province_id;
      }
      common.fly_post(
        "api/v4_5/home/banners",
        {
          cate_id: 5, //积分商城广告位
          province_id: province_id || 0
        },
        response => {
          let res = response.data;
          if (res.status_code == 0) {
            res.data.forEach(item => {
              switch (item.ad_id) {
                case 1:
                  this.adv1 = item;
                  break;
                case 2:
                  this.adv2 = item;
                  break;
                case 3:
                  this.adv3 = item;
                  break;
                case 4:
                  this.adv4 = item;
                  break;
                case 5:
                  this.adv5 = item;
                  break;
                case 6:
                  this.adv6 = item;
                  break;
                case 7:
                  this.adv7 = item;
                  break;
                default:
                  break;
              }
            });
          }
        }
      );
    },
    //商品列表
    getMall () {
      if (this.isbottom) {
        return false;
      }
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/shop_goods/index",
        {
          page: this.num,
          pageSize: 10,
          recommend_set: 1,
          keyword: this.tab_value,
          user_id: wx.getStorageSync("user_id") || 0
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            if (this.num == 1) {
              this.mallList = res.data.data;
            } else if (res.data.data.length > 0 && this.num > 1) {
              this.mallList.push(...res.data.data);
            } else if (res.data.data.length == 0 && this.num > 1) {
              common.mmk_Loading(2, "已经到最底下了");
              this.isbottom = true;
            }
          }
        }
      );
    },
    //滚动事件
    scroll (e) {
      let page_scroll = e.mp.detail.scrollTop;
      this.alpha = page_scroll / 200 > 1 ? 1 : page_scroll / 200;
      if (page_scroll > 70) {
        this.s_show = true;
      } else if (page_scroll <= 70) {
        this.s_show = false;
      }
    },
    //搜索框
    search_focus () {
      wx.navigateTo({ url: "/pages/package_main/searchPage/main?type=2" });
    },
    //上拉加载
    pullrefresh (e) {
      this.num++;
      this.getMall(this.num);
    },
    // 获取tab数组
    get_tab () {
      common.fly_post(
        "api/v4_5/project/tab_check",
        {
          tabNum: 3
        },
        result => {
          let res = result.data;
          if (res.status_code == "0") {
            this.tab_arr = res.data;
            if (this.tab_arr.length > 0) {
              this.tab_arr[0].active = true;
              this.tab_id = this.tab_arr[0].id;
              this.tab_value = this.tab_arr[0].value;
              this.getMall(this.num);
            }
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: false, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      );
    },
    // 切换医美板块tab栏
    toggle_tab (item) {
      this.tab_id = item.id;
      this.tab_value = item.value;
      this.isbottom = false;
      this.num = 1;
      this.getMall(this.num);
    },
    get_msg () {
      let that = this;
      common.fly_post(
        "api/v4_5/user_messages/system_index",
        {
          page: 1,
          pageSize: 1000
        },
        result => {
          let res = result.data;
          if (res.status_code == 0) {
            let old_num = wx.getStorageSync("msg_num")
              ? wx.getStorageSync("msg_num") - 0
              : 0;
            let now_num = res.data.total - 0;
            if (now_num - old_num > 0) {
              this.has_msg = true;
            } else {
              this.has_msg = false;
            }
          }
        }
      );
    }
  }
};
</script>

<style scoped lang="less">
.container {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  /* 搜索框样式 */
  // search Bar
  .searchBar {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    background: #3EB0A9;
    padding: 0 10px;
    // box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.06);
    display: flex;
    .msg {
      position: relative;
      width: 40px;
      .img {
        width: 26px;
        height: 26px;
        // margin-top: 5px;
        position: absolute;
        top: 26%;
        left: 20%;
      }
    }
    .content {
      flex: 1;
      height: 32px;
      position: relative;
      // margin: 8px 0 9px 0;
      margin-top: 6px;
      .search-inp {
        width: 100%;
        height: 32px;
        background: #fff;
        border-radius: 16px;
        display: block;
        margin: 0 auto;
        box-sizing: border-box;
        padding-left: 35px;
        // opacity: 0.7961;
      }
      .search-icon {
        width: 20px;
        height: 20px;
        display: block;
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        // opacity: 0.31;
      }
    }
  }
  .search-icon1 {
    display: block;
    position: absolute;
    width: 22px;
    height: 22px;
    right: 0;
    top: 0;
    margin: 15px 15px 0 0;
    z-index: 999;
  }
  // banner
  .banner {
    height: 136px;
    margin: 57px 10px 0;
    border-radius: 5pt;
    overflow: hidden;
    swiper {
      height: 100%;
    }
    .slide-image {
      width: 100%;
      height: 100%;
    }
  }
  /* 标题样式 */
  .tip {
    width: 100%;
    height: 48px;
    text-align: center;
    padding: 16px 0 0;
    box-sizing: border-box;
    .tip .tipImg {
      width: 269px;
      height: 13px;
    }
  }
  //分类
  .nav {
    margin: 0 8px;
    // display: flex;
    .nav-item {
      // flex: 1;
      width: 20%;
      display: inline-block;
      padding: 5px 0;
      .image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: 0 auto 8px;
        .img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .nav-msg {
        font-size: 12px;
        font-family: "Regular";
        color: rgba(102, 102, 102, 1);
        text-align: center;
      }
    }
  }
  /* 广告位样式 */
  .ad_moudle {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 10px;
    position: relative;
    margin-top: 5px;
    .adImg {
      border-radius: 5px;
      margin-top: 8px;
      float: left;
      width: 48.5%;
      overflow: hidden;
    }
    .adImg1 {
      width: 100%;
      height: auto;
      .img {
        width: 100%;
        height: 70px;
      }
    }
    .adImg2,
    .adImg3 {
      height: 75px;
      .img {
        width: 100%;
        height: 75px;
      }
    }
    .adImg2 {
      margin-right: 8px;
    }
    .adImg4 {
      height: 152px;
      float: left;
      margin-right: 8px;
      .img {
        width: 100%;
        height: 152px;
      }
    }
    .adImg5,
    .adImg6 {
      height: 71px;
      float: left;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .adImg7 {
      width: 100%;
      height: 75px;
      float: left;
      margin-bottom: 0;
      .img {
        width: 100%;
        height: 75px;
      }
    }
  }
  .fineMall {
    height: 22px;
    width: 100%;
    font-size: 12px;
    line-height: 37px;
    color: #444;
    text-align: center;
    position: relative;
    clear: both;
    background: #fff;
    margin-top: 20px;
    .fineMall_img {
      display: block;
      width: 96px;
      height: 22px;
      margin: 0 auto;
      // padding-top: 8px;
    }
  }
  //   商品列表
  .goods-list {
    position: relative;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1) 0%,
      rgba(243, 244, 246, 1) 8%
    );
    padding-bottom: 70px;
    .malltab {
      width: 100%;
      position: -webkit-sticky;
      position: -moz-sticky;
      position: sticky;
      top: 43px;
      z-index: 90;
      background: #fff;
    }
    .daodi {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 30px;
      text-align: center;
      font-size: 12px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #999990;
      line-height: 20px;
    }
  }
}
</style>